<template>
  <div style="padding: 32px;background-color: #f8f8f8;position: relative;">
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card shadow="never">
          <el-statistic
            group-separator=","
            :value="1231231"
            title="联单总数"
          ></el-statistic>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <el-statistic
            group-separator=","
            :value="1231231"
            title="运输总量"
          >
            <template slot="suffix">
              <div style="font-size: 20px;">吨</div>
            </template>
          </el-statistic>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <el-statistic
            group-separator=","
            :value="1231231"
            title="运输次数"
          ></el-statistic>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="never">
          <el-statistic
            group-separator=","
            :value="1231231"
            title="处置总量"
          >
            <template slot="suffix">
              <div style="font-size: 20px;">吨</div>
            </template>
          </el-statistic>
        </el-card>
      </el-col>
    </el-row>

    <div style="margin-top: 20px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-card shadow="never">
            <area-pie-chart></area-pie-chart>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="never">
            <status-bar-chart></status-bar-chart>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div style="margin-top: 20px">
      <el-row :gutter="10">
        <el-col :span="14">
          <el-card shadow="never">
            <lj-line-chart></lj-line-chart>
          </el-card>
        </el-col>
        <el-col :span="10">
          <el-card shadow="never">
            <lj-type-pie-chart></lj-type-pie-chart>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div style="margin-top: 20px">
      <el-row>
        <el-col :span="24">
          <el-card shadow="never">
            <div style="font-weight: bold">工地统计</div>
            <div style="margin-top: 10px">
              <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                  prop="date"
                  label="工地名称">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="联单数量">
                </el-table-column>
                <el-table-column
                  prop="address1"
                  label="垃圾转运量">
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="运输车次">
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
import AreaPieChart from "@/views/wasterTran/order/echarts/AreaPieChart.vue";
import StatusBarChart from "@/views/wasterTran/order/echarts/StatusBarChart.vue";
import LjLineChart from "@/views/wasterTran/order/echarts/LjLineChart.vue";
import LjTypePieChart from "@/views/wasterTran/order/echarts/LjTypePieChart.vue";

export default {
  name: "Order",
  components: {LjLineChart, AreaPieChart, StatusBarChart, LjTypePieChart},
  data() {
    return {
      tableData: [{
        date: '新城建设工地',
        name: '100',
        address1: '102吨',
        address: '122',
      }, {
        date: '地铁建设工程',
        name: '100',
        address1: '102吨',
        address: '122',
      }, {
        date: '滨海新区工程',
        name: '100',
        address1: '102吨',
        address: '122',
      }, {
        date: '城市更新项目',
        name: '100',
        address1: '102吨',
        address: '122',
      }]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // getList() {
    //   this.loading = true;
    //   listConfig(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
    //       this.configList = response.rows;
    //       this.total = response.total;
    //       this.loading = false;
    //     }
    //   );
    // },
  }
};
</script>
